<template>
  <div class="avatar">
    <span>{{ nick }} , {{ hello }}</span>
    <el-dropdown trigger="click">
        <el-avatar class="el-avatar" size="large" :src="avatar"></el-avatar>
        <template #dropdown>
            <el-dropdown-menu>
                <el-dropdown-item @click="handleUserCenter">个人中心</el-dropdown-item>
                <el-dropdown-item @click="handleLogout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
        </template>
        
    </el-dropdown>
    
  </div>
</template>

<script setup>
import { ref, computed} from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import {logout} from '@/api/login'
import Cookies from "js-cookie";

const Router = useRouter();
const store = useStore();
const nick = computed(() => {
  return store.state.user.nick;
});
const avatar = computed(() => {
  if (store.state.user.avatar && store.state.user.avatar != "undefined")
    return store.state.user.avatar;
  return "https://ooo.0x0.ooo/2024/01/16/OvB1jY.png";
});
const hello = computed(() => {
  const hour = new Date().getHours();
  if (hour > 0 && hour < 5) return "夜深了,早点休息哦";
  if (hour >= 5 && hour < 11) return "早上好";
  if (hour >= 11 && hour < 14) return "中午好";
  if (hour >= 14 && hour < 18) return "下午好";
  return "晚上好";
});

const handleUserCenter = () => {
  Router.push({path:'/userCenter'})
}

const handleLogout = () => {
  logout();
  Cookies.remove("satoken");
  Router.push({path:'/login'})
}

</script>

<style lang="scss" scoped>
.avatar {
  margin-right: 10px;

  span {
    margin-right: 10px;
  }
  
}

.el-avatar{
    cursor: pointer;
}

</style>